<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        @charset "utf-8";
.tc{
	text-align: center;
}
.mt5{
	margin-top: 15px;
}


.good_title{
	height: 20px;
	overflow: hidden;
}
.googs_list{
	width: 80%;
	margin: 50px auto 0;
	height: 300px;
	/* box-shadow: 0px 0px 5px #999; */
}


.googs_list ul li{
	width: 20%;
	float: left;
	box-sizing: border-box;
	height: 300px;
	border: 1px solid #999;
}
.googs_list ul li:hover{
	box-shadow: 0px 0px 3px #000;
}
 ul li img{
	width:150px;
	height: 150px;
	
}
li {
	list-style: none;
}

table{
	width: 80%;
	margin:100px auto 150px;
	border-collapse: collapse;
	text-align: center;
}

tr,th,td{
	border: 1px solid #999;
	padding: 5px;
}
tr,th{
	height: 40px;
}
table img{
	width: 100px;
	height: 100px;
}
.count{
	width: 60px;
	text-align: center;
	vertical-align: bottom;
	height: 26px;
	line-height: 26px;
}
.btn{
	width: 40px;
	border: none;
	cursor: pointer;
	outline: none;
	font-size: 20px;
	height: 26px;
	line-height: 26px;
}
    </style>
</head>
<body>
    <div class="googs_lis tc">
        <div class="tc">
             <br>
             <h2>商品列表展示</h2>
             <br>
             <ul class="list_ul">
                 	<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						
					</ul>
             </ul>
            
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" value="" />
                </td>
                <td>
                    <p>
                        <img src="//i1.mifile.cn/a1/pms_1506417289.23728408.jpg" >
                        <br>
                        <span>米家压力IH电</span>
                    </p>
                </td>
                <td>
                    <button type="button" class="btn">-</button>
                    <input type="text" name="" id="" value="" class="count"/>
                    <button type="button" class="btn">+</button>
                </td>
                <td>
                    <span>3000元</span>
                </td>
                <td>
                    3000*2
                </td>
                <td>
                    <button type="button">删除</button>
                </td>
                <td>
                    2020/10/14
                </td>
                
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <label>
                        <input type="checkbox" name="check" class="quanxuan"/>
                        全点
                    </label>
                </td>
                <td>
                    <button type="button" id="delChecked">
                        删除
                    </button>
                </td>
                <td colspan="4"></td>
                <td>
                    价格：<br>
                    <div id="sum">
                        
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
<script>
	var arr = [];
var cartArr = [];
window.onload = function () {	
	showGoodsList(getLocalGoodsListData());
	render(getLocalCartData());
}
function showGoodsList(arr) {
	var list_ul = document.querySelector(".list_ul");
	list_ul.innerHTML = "";
	for (var i = 0; i < arr.length; i++) {
		list_ul.innerHTML +=			`
			<li data-id="${ arr[i].goodsid }">
				<img src="${ arr[i].image }" >
				<div class="good_title mt5">
					${ arr[i].name }
				</div>
				<div class="price mt5">
					${ arr[i].price }元
				</div>
				<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
					加入购物车
				</button>
			</li>
		`;
	}
}
function addCart(goodsId, img, goodsName, price) {
	var count = 1;
	var xiaoji = price / 1 * count;
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleTimeString()
	}

	addData(obj);
}
function addData(obj) {
	cartArr = getLocalCartData();
	var result = cartArr.some(function(item,index){
		return item.id === obj.id
	})
	if(result){
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
function render(cartArr) {
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;
	for (var i = 0; i < cartArr.length; i++) {
		str += `
			
				<tr>
								<td>
									<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
								</td>
								<td>
									<p>
										<img src="${ cartArr[i].src }" >
										<br>
										<span>${ cartArr[i].title }</span>
									</p>
								</td>
								<td>
									<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
									<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
									<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
								</td>
								<td>
									<span>${ cartArr[i].price }元</span>
								</td>
								<td>
									${ cartArr[i].xiaoji }
								</td>
								<td>
									<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
								</td>
								<td>
									${ cartArr[i].time }
								</td>
								
							</tr>
		
		`
		sum = sum / 1 + cartArr[i].xiaoji / 1
	}

	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}
function getLocalCartData() {
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}
function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}
function jian(id) {
	console.log("id:", id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
function jia(id) {
	console.log(id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
function del(id) {
	cartArr = getLocalCartData();
	cartArr = cartArr.filter(function (item, index) {
		return item.id != id
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function () {
	var danxuanList = document.querySelectorAll(".danxuan");
	for (let index = 0; index < danxuanList.length; index++) {
		danxuanList[index].checked = quanxuan.checked;
	}
}
var delChecked = document.getElementById("delChecked");
delChecked.onclick = function(){
	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll(".danxuan:checked");
	for (let i = 0; i < danxuanList.length; i++) {
		cartArr.forEach(function(item,index){
			if(item.id === danxuanList[i].getAttribute("data-id")){
				cartArr.splice(index,1)
			}
		})	
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}
</script>
</body>
</html>